<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>智慧教育系统</title>
    <meta content="" name="descriptison">
    <meta content="" name="keywords">


    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="static/assets/js/echarts.min.js"></script>
    <script src='static/assets/js/ecStat.min.js'></script>


    <!-- Favicons -->
    <link href="static/assets/img/在线教育.svg" rel="icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900"
          rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="static/assets/css/style.css" rel="stylesheet">

    <!-- =======================================================
    * Template Name: Mamba - v2.0.1
    * Template URL: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/
    * Author: BootstrapMade.com
    * License: https://bootstrapmade.com/license/
    ======================================================== -->
</head>

<body>
<!-- ======= Header ======= -->
<script src="static/assets/vendor/jquery/jquery.min.js"></script>
<script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="static/assets/vendor/php-email-form/validate.js"></script>
<script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="static/assets/vendor/venobox/venobox.min.js"></script>
<script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="static/assets/vendor/counterup/counterup.min.js"></script>
<script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="static/assets/vendor/aos/aos.js"></script>
<!--<script src="../static/assets/js/vue-2.4.0.js"></script>-->

<header id="header">
    <div class="container">

        <div class="logo float-left">
            <h1 class="text-light"><a href="index.html"><span>MOOC</span></a></h1>
            <!-- Uncomment below if you prefer to use an image logo -->
            <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav class="nav-menu float-right d-none d-lg-block">
            <ul>
                <li><a href="/study" style="font-size: 24px">学习园地</a></li>
                <li><a href="/login?user=张程智&password=123456" style="font-size: 24px">学情分析</a></li>
                <li><a href="/recommend" style="font-size: 24px">习题推荐</a></li>
            </ul>
        </nav><!-- .nav-menu -->

    </div>

    <div id="user">
        <span style="position: relative; top: 13px; right: -1158px;" value="1">{{local_user}} <a
                onclick="window.location.href='/'">登出</a></span>
    </div>
</header><!-- End Header -->

<!-- ======= Our Team Section ======= -->
<section id="team" class="team font-color">



    <div class="container">



        <div class="section-title" style="height:100px;position:relative; left: 0px; top: -8px; ">
            <h2 style="position: absolute; left: 500px; top: 30px;">学习园地</h2>
            <!--滑动按钮切换选择填空题-->
            <div class="switch" style="position: relative; right: -325px; top: 35px;display: inline">
                <label>
                    <input type="checkbox" id="checkboxswitch" class="onoff" onclick="checkboxOnclick(this)">
                    <span id="exercise_type">&nbsp;&nbsp;选择题</span>
                </label>
            </div>
            <!--            <div style="position: absolute; left: 3px; top: 30px;">haha</div>-->
        </div>

        <section class="counts section-bg" id="fill_exercise_list" style="display: block">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="exercise" style="margin-bottom: 15px; height:282px;position:relative; left: 0px; top: 0px; ">
                <span class="title_3" style="position:absolute; left: 0px; top: 0px;">练习题列表</span>
                <div class="line" style="position:absolute; left: 0px; top: 18px;"></div>
                <div id="exercise_list" style="position:absolute; left: 54px; top:70px;" v-for="">
                    {% for exercise in exercises %}
                    <li><a href="#" onclick="getTest({{exercise['id']}})">[基础] {{exercise['name']}}</a> &nbsp;&nbsp;&nbsp;&nbsp;掌握程度：{{exercise['master_level']}}
                        &nbsp;&nbsp;&nbsp;&nbsp;题型:{{exercise['type']}}
                    </li>
                    {% endfor %}
                </div>

                <button class="blue-btn" style="position: relative; left: 1028px; top: 240px" id="submit_select_answer_btn2">下一页</button>
            </div>


        </section>

        <section class="counts section-bg" id="fill_exercise_section">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="exercise_detail"
                 style="margin-bottom: 15px; height:478px;position:relative; left: 0px; top: 0px; ">
                <span class="title_3" style="position:absolute; left: 0px; top: 0px;">题目 </span>
                <div class="line" style="position:absolute; left: 0px; top: 18px;"></div>
                <div style="position: absolute;right:10px;top: 2px ">
                    id: <span id="exercise_id">1001</span>
                </div>
                <div id="exercise_detail_div" style="position:absolute; left: 54px; top: 30px;width: 90%">
                    <p style="position: absolute; left: 34px; top: 12px;font-size: 20px" id="exercise_content">
                        数一数，有几只青蛙？</p>
                    <img src="../static/assets/img/frag.png"
                         style="height: 250px ; margin: 10px; position: relative; left:50px; top: 55px;"/>
                    <p style="position: absolute; left: 34px; bottom: -111px;font-size: 20px;">
                        答：有
                        <input type="text" id="user_answer" required minlength="4" maxlength="10" size="10"
                               style="width:57px; height:23px; position: absolute; left: 69px; bottom: 2px;"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="measure">只</span><span id="object">青蛙</span>
                    </p>
                    <button class="blue-btn"
                            style="position: absolute; right: 10px; top: 10px;background: #5CB85C;color: white;height: 38px;width: 121px"
                            id="submit_answer_btn"> 提交答案
                    </button>
                    <button class="blue-btn"
                            style="position: absolute; right: 10px; top: 52px;background: #F5A623;color: white;height: 38px;width: 121px"
                            id="hint_btn"> 解题说明
                    </button>
                    <p style="position: absolute; left: 235px; bottom: -173px">将此内容加入学习计划</p>
                    <button class="blue-btn"
                            style="position: absolute; left: 413px; bottom: -159px;background: #5CB85C;color: white;font-size: 14px;height: 27px;width: 102px"
                            id="add_to_goal">加入目标
                    </button>
                    <button class="blue-btn"
                            style="position: absolute; left: 538px; bottom: -159px;background: #5CB85C;color: white;font-size: 14px;height: 27px;width: 119px"
                            id="go_plan">前往学习计划
                    </button>
                    <button id="sketch_paper" class="blue-btn"
                            style="position: absolute; right: 300px; top: 10px;width: 85px;text-align: right;"
                            onclick="window.location.href='/draft'">计算纸
                    </button>
                    <img id="pen" src="../static/assets/img/计算纸.svg"
                         style="position: absolute;top:16px;left:621px;width: 15px;"/>
                </div>
            </div>

        </section>

        <section class="counts section-bg" id="select_exercise_list">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="select_exercise_part" style="margin-bottom: 15px; height:350px;position:relative; left: 0px; top: 0px; ">
                <span class="title_3" style="position:absolute; left: 0px; top: 0px;">选择题列表</span>
                <div class="line" style="position:absolute; left: 0px; top: 18px;"></div>
                <div id="" style="position:absolute; left: 54px; top:70px;" v-for="">
                    {% for exercise in select_exercises %}
                    <li><a href="#" onclick="getSelectList({{exercise['id']}})">[基础] {{exercise['name']}}</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;掌握程度：{{exercise['master_level']}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:{{exercise['KC']}}
                    </li>
                    {% endfor %}
                </div>
                <button class="blue-btn" style="position: relative; left: 1028px; top: 306px" id="submit_select_answer_btn3">下一页</button>
            </div>


        </section>
        <section class="counts section-bg" id="select_exercise_section">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="select_exercise_div"
                 style="margin-bottom: 15px; height:462px;position:relative; left: 0px; top: 0px;background: white;">
                <span style="position: relative; left: 14px; top: 3px">选择题</span>
                <div style="position: absolute;right:10px;top: 2px ">
                    id: <span id="select_exercise_id">1</span>
                </div>
                <div class="line" style="position:absolute; left: 0px; top: 22px;"></div>
                <div id="select_exercise_content" style="position: relative; left: 46px; top: 22px; height: 300px; width: 80%; text-align: left;white-space:pre-line;">
                    <h5 id="select_content">Python是一种          类型的编程语言。<br><br>A	汇编语言					B	机器语言<br><br>C	解释型高级语言				D	编译型高级语言</h5>
                </div>
                <h5 style="position: relative; left: 30px; top: 62px">答案 <input type="text" required minlength="4" maxlength="10" size="10" id="select_user_answer"></h5>
                <button class="blue-btn" style="position: relative; left: 220px; top: 25px" id="submit_select_answer_btn">提交答案</button>
                <button class="blue-btn" style="position: relative; left: 238px; top: 25px">解题说明</button>
                <button class="blue-btn" style="position: relative; left: 246px; top: 25px">加入目标</button>
                <button class="blue-btn" style="position: relative; left: 254px; top: 25px">前往学习计划</button>
                <button class="blue-btn" style="position: relative; left: 260px; top: 25px" onclick="window.location.href='/draft'">计算纸</button>
            </div>

        </section>


        <!--隐藏 style="display: none"-->
        <section class="counts section-bg" id="short_state">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="short_state_div"
                 style="margin-bottom: 15px; height:462px;position:relative; left: 0px; top: 0px;background: white ">
                <span style="position: relative; left: 18px; top: 3px">短期状态</span>
                <div class="line" style="position:absolute; left: 0px; top: 22px;"></div>
                <div id="kc_curve" style="width: 100%;height:400px;position:absolute; left: 0px; top: 57px;">
                    <img src="../static/assets/img/knowledge_tracing_heatmap_5.svg" style="margin: 84px 10px 10px 30px">
                </div>
            </div>

        </section>

    </div>

</section><!-- End Our Team Section -->

<!-- ======= Footer ======= -->
<footer id="footer">
    <div class="container">
        <div class="copyright">
            &copy; Copyright <strong><span>Jiangsu Normal University</span></strong>. All Rights Reserved
        </div>
        <div class="credits">
            <!-- All the links in the footer should remain intact. -->
            <!-- You can delete the links only if you purchased the pro version. -->
            <!-- Licensing information: https://bootstrapmade.com/license/ -->
            <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/ -->
            Designed by <a href="http://eit.jsnu.edu.cn/_t1745/main.htm" target="_blank">School of Computer Science and
            Technology</a>
        </div>
    </div>
</footer><!-- End Footer -->

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

<!-- Vendor JS Files -->
<script src="static/assets/vendor/jquery/jquery.min.js"></script>
<script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="static/assets/vendor/php-email-form/validate.js"></script>
<script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="static/assets/vendor/venobox/venobox.min.js"></script>
<script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="static/assets/vendor/counterup/counterup.min.js"></script>
<script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="static/assets/vendor/aos/aos.js"></script>

<!-- Template Main JS File -->
<script src="static/assets/js/main.js"></script>

<script type="text/javascript">
    window.onload = function () {
        // 初始化页面
        // 1.隐藏填空题
        // 2.初始化选择题list
        // 3.初始化填空题list


        var checkboxswitch = document.getElementById('checkboxswitch');
        checkboxOnclick(checkboxswitch);
        $.ajax({
            type: 'GET',
            url: '/testGet',
            dataType: 'json',
            data: {'id': "1001"},
            success: function (res) {
                //设置题目id
                $("#exercise_id").text(res['id'])
                // 设置题目内容
                $("#exercise_content").text(res['content'])
                // 设置对象
                $("#object").text(res['object'])
                // 设置计量单位
                $("#measure").text(res['measure'])
            },
            error: function () {
                console.log('error')
            }
        })

        $.ajax({
            type: 'GET',
            url: '/SelectGet',
            dataType: 'json',
            data: {'id': "1"},
            success: function (res) {
                //设置题目id
                $("#select_exercise_id").text(res['id'])
                // 设置题目内容
                content = res['content'].replace('\\n','<br><br>')
                $("#select_exercise_content").innerHTML = content;
            },
            error: function () {
                console.log('error')
            }
        })
        // 初始化页面


        var pen = document.getElementById("pen");//计算纸图标
        var btn_sketch_paper = document.getElementById("sketch_paper");//计算纸按钮

        src1 = "../static/assets/img/笔记-白.svg";
        src2 = "../static/assets/img/计算纸.svg";
        // 鼠标悬停切换白色图标
        btn_sketch_paper.onmouseover = function () {
            pen.src = src1;
        }
        //鼠标移出切换蓝色图标
        btn_sketch_paper.onmouseout = function () {
            pen.src = src2;
        }



        //设置时间格式
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        var submit_answer_btn = document.getElementById("submit_answer_btn");//提交答案按钮
        // 点击提交答案按钮弹框显示提交结果
        submit_answer_btn.onclick = function () {
            var id = document.getElementById("exercise_id").innerText;
            var user_answer_input = document.getElementById("user_answer").value;
            // console.log(user_answer_input)
            var time = new Date().Format("yyyy-MM-dd HH:mm:ss");
            $.ajax({
                type: 'POST',
                url: '/checkAnswer',
                dataType: 'json',
                data: {
                    'id': id,
                    'user_answer': user_answer_input,
                    'end_time': time,
                },
                success: function (res) {
                    alert(res['status'])//弹框
                },
                error: function () {
                    // console.log('error')
                }
            })
        }

        // 选择题点击提交答案
        var submit_select_answer_btn = document.getElementById("submit_select_answer_btn");//提交答案按钮
        submit_select_answer_btn.onclick = function () {
            var id = document.getElementById("select_exercise_id").innerText;
            var user_answer_input = document.getElementById("select_user_answer").value;
            // console.log(user_answer_input)
            var time = new Date().Format("yyyy-MM-dd HH:mm:ss");
            $.ajax({
                type: 'POST',
                url: '/checkSelectAnswer',
                dataType: 'json',
                data: {
                    'id': id,
                    'user_answer': user_answer_input,
                    'end_time': time,
                },
                success: function (res) {
                    alert(res['status'])//弹框
                },
                error: function () {
                    // console.log('error')
                }
            })
        }

        //jquery实现点击提示按钮弹框显示提示信息
        $('#hint_btn').on("click", function () {
            alert("这是提示！！！");
        })

        //监听加入目标事件
        $('#add_to_goal').on("click", function () {
            if (confirm("您确定要将此题加入目标吗？")) {
                alert("已加入");
            } else {
                alert("已取消");
            }

        })
        //监听前往学习计划事件
        $('#go_plan').on("click", function () {
            var name = prompt("你的名字是：");
            alert("你好" + name);
        })

        //检测exercise_id变化

    }
</script>

<script type="text/javascript">
    // ajax请求
    function getTest(id) {
        $.ajax({
            type: 'GET',
            url: '/testGet',
            dataType: 'json',
            data: {'id': id},
            success: function (res) {
                //设置题目id
                $("#exercise_id").text(res['id'])
                // 设置题目内容
                $("#exercise_content").text(res['content'])
                // 设置对象
                $("#object").text(res['object'])
                // 设置计量单位
                $("#measure").text(res['measure'])
            },
            error: function () {
                console.log('error')
            }
        })
    }
</script>

<script type="text/javascript">
    // ajax请求
    function getSelectList(id) {
        $.ajax({
            type: 'GET',
            url: '/SelectGet',
            dataType: 'json',
            data: {'id': id},
            success: function (res) {
                //设置题目id
                $("#select_exercise_id").text(res['id']);
                // 设置题目内容
                //一些特殊字符替换成html的内容
                content = res['content'].replaceAll('\\n','<br><br>');
                content = content.replaceAll('\\t','&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                console.log(content)
                var select_content = document.getElementById('select_content');
                // select_content.style.whiteSpace = 'pre'; // html保留文本原格式，如换行、空格
                select_content.innerHTML = content;//识别html文本内容
            },
            error: function () {
                console.log('error')
            }
        })
    }
</script>

<script type="text/javascript">
    var fill_exercise_section = document.getElementById('fill_exercise_section');
    var fill_exercise_list = document.getElementById('fill_exercise_list');
    var select_exercise_section = document.getElementById('select_exercise_section');
    var select_exercise_list = document.getElementById('select_exercise_list');
    var exercise_type = document.getElementById('exercise_type');

    /*点击滑动按钮切换练习模式（选择题vs填空题）*/
    function checkboxOnclick(checkbox){
            if (checkbox.checked == true) {
                fill_exercise_section.style.display = "none";
                fill_exercise_list.style.display = "none";
                select_exercise_section.style.display = "block";
                select_exercise_list.style.display = "block";
                exercise_type.innerHTML = "&nbsp;&nbsp;选择题"
            } else {
                fill_exercise_section.style.display = "block";
                fill_exercise_list.style.display = "block";
                select_exercise_section.style.display = "none";
                select_exercise_list.style.display = "none";
                exercise_type.innerHTML = "&nbsp;&nbsp;填空题"
            }
        }
</script>

</body>

</html>